import ArkStatisticVisual from '../ark-statistic-visual/ArkStatisticVisual.vue';
import ArkIconFont from '../../ark-component-v1/ark-iconfont/ArkIconFont.vue';

export default {
  title: 'base-component-v1/ArkStatisticVisual',
  component: ArkStatisticVisual,
  components: {ArkIconFont},
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、tailwindcss</span> 使用`
      }
    }
  },
  argTypes: {
    bgColor: {description: '背景颜色'},
    title: {description: '标题'},
    value: {description: '值'},
    unit: {description: '单位'},
    default: {description: '整个左部分'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ArkStatisticVisual, ArkIconFont},
    setup() {
      return {args};
    },
    template: `
      <ArkStatisticVisual v-bind="args">
        <ArkIconFont cls="icon-ADA" color="#5391F7"></ArkIconFont>
      </ArkStatisticVisual>`,
  }),
  args: {
    bgColor: 'bg-blue-100',
    title: '设备数',
    value: '83',
    unit: '个',
  }
};